﻿<template>
  <data-table-app-page>
    <el-form slot="toolbar" inline>
      <el-form-item label="标题">
        <el-input
          v-model="queryForm.title"
          clearable
          style="width: 160px"
        />
      </el-form-item>
      <el-form-item label="模式">
        <type-select
          v-model="queryForm.sendMode"
          :items="DictMan.items('broadcast.sendMode')"
          style="width: 90px"
        />
      </el-form-item>
      <el-form-item label="内容类型">
        <type-select
          v-model="queryForm.type"
          :items="DictMan.items('broadcast.type')"
          style="width: 130px"
        />
      </el-form-item>
      <el-form-item label="启用状态">
        <type-select
          v-model="queryForm.isvalid"
          :items="DictMan.items('enable')"
          style="width: 90px"
        />
      </el-form-item>
      <el-form-item>
        <data-table-query-button :queryParams="queryForm" />
      </el-form-item>
      <el-form-item style="margin-left: 16px">
        <el-button
          v-auth:publish
          type="primary"
          icon="el-icon-plus"
          @click="onAddClick"
        >
          发布
        </el-button>          
      </el-form-item>
    </el-form>
    <data-table
      ref="table"
      :url="`/api/broadcastMsg/listBroadcastMsg?broadcastType=${broadcastType}`"
      row-key="msgId"
    >
      <el-table-column prop="title" label="标题" width="180" show-overflow-tooltip />
      <el-table-column prop="weekTime" label="模式" width="50" v-slot="{row}">
        <span>{{DictMan.itemMap('broadcast.sendMode')[row.sendMode]}}</span>
      </el-table-column>
      <el-table-column prop="weekTime" label="发送时间" width="76" v-slot="{row}">
        <el-tag type="warning" hit>
          <span>{{row.weekTime.substring(0, 5)}}</span>
        </el-tag>
      </el-table-column>
      <el-table-column prop="weekDay" label="重复" width="260" v-slot="{row}">
        <el-tag v-if="row.sendMode == 1" type="info">不重复</el-tag>
        <el-tag v-else-if="row.weekDay.indexOf('1') == -1" type="info">不重复</el-tag>
        <el-tag v-else-if="row.weekDay.indexOf('0') == -1" type="primary" hit>每天</el-tag>
        <week-enabler v-else :value="row.weekDay" :editable="false" />
      </el-table-column>
      <el-table-column prop="rangeType" label="广播范围" width="104" v-slot="{row}">
        <span>{{DictMan.itemMap('broadcast.scope')[row.rangeType]}}</span>
      </el-table-column>
      <el-table-column prop="type" label="内容类型" width="76" v-slot="{row}" show-overflow-tooltip>
        <span>{{DictMan.itemMap('broadcast.type')[row.type]}}</span>
      </el-table-column>
      <el-table-column label="内容" width="50" type="expand" v-slot="{row}">
        <p v-if="row.type == 0 || row.type == 5">{{row.content}}</p>
        <el-image v-else-if="row.type == 1" :src="row.url" :preview-src-list="[row.url]" />
        <el-link v-else-if="row.type == 2" type="primary" :href="row.url" target="_blank">下载链接</el-link>
        <el-link
          v-else-if="row.type == 4"
          type="primary"
          :href="/^http(s)?:\/\//gi.test(row.linkUrl) ? row.linkUrl : 'http://' + row.linkUrl"
          target="_blank"
        >{{row.linkUrl}}</el-link>
      </el-table-column>
      <el-table-column prop="publisher" label="发布者" width="104" show-overflow-tooltip />
      <el-table-column prop="createTime" label="发布时间" width="152" />
      <el-table-column prop="sendTotal" label="累计收听人数 / 累计发送人数" width="202" v-slot="{row}">
        <send-receive-stat-col :row="row" />
      </el-table-column>
      <el-table-column prop="status" label="启用" width="60" v-slot="{row}" fixed="right">
        <enable-status v-model="row.isvalid" :record="row" :readonly="!$auth('enable')" />
      </el-table-column>
      <el-table-column v-if="$auth(['update', 'delete'])" v-slot="{row}" label="操作" min-width="200px" fixed="right">
        <el-button
          v-auth:update
          @click="onCopyClick(row)"
        >
          编辑发布
        </el-button>
        <delete-confirm-button
          v-auth:delete
          okButtonType="danger"
          @ok="onDeleteClick(row)"
        />
      </el-table-column>
    </data-table>

    <edit-dialog ref="editDialog" />
  </data-table-app-page>
</template>
  
<script>
import WeekEnabler from './WeekEnabler';
import SendReceiveStatCol from './SendReceiveStatCol';
import EnableStatus from './EnableStatus';
import EditDialog from './EditDialog';

export default {
  pageProps: {
    title: '广播发布管理'
  },
  components: {
    WeekEnabler,
    SendReceiveStatCol,
    EnableStatus,
    EditDialog
  },
  props: {
    broadcastType: null,
    title: String,
    openTab: null
  },
  data() {
    return {
      permission: '/smart_info_center/life/care/broadcast',
      queryForm: {
        type: null
      }
    }
  },
  mounted() {
    this.$pageEventBus.on('broadcast-add-success', () => {
      this.$refs.table.reloadCurrentPage();
    });
  },
  methods: {
    onAddClick() {
      this.$refs.editDialog.open(this.broadcastType);
    },
    onCopyClick(row) {
      this.$refs.editDialog.open(this.broadcastType, row);
    },
    async onDeleteClick(row) {
      const ret = await this.$http.delete('/api/broadcastMsg/deleteBroadcastMsg',
        {params: {msgIds: row.msgId, rangeType: 3}});
      if (ret.success) {
        this.$refs.table.reloadCurrentPage();
        this.$message.success('删除成功');
      }
    }
  }
}
</script>
